<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        div{
            margin: 10px auto;
            text-align: center;
        }
        h1 {
            display: inline-block; 
            font-size: 100px;
        }
        
        .p1,.p4{
            color: cornflowerblue;
        }
        .p2,.p6{
            color: crimson;

        }
        .p3{
            color: chocolate;
        }
        .p5{
            color:darkgreen;
        }

        .p1:hover { color:black; }
        .p2:hover { color:aquamarine ;}
        .p3:hover { color:blueviolet }
        .p4:hover { color:black; }
        .p5:hover { color:aliceblue; }
        .p6:hover {color:aquamarine ; }
    </style>
</head>
<body>
    <div>
        <h1 class="p1">G</h1>
        <h1 class="p2">o</h1>
        <h1 class="p3">o</h1>
        <h1 class="p4">g</h1>
        <h1 class="p5">l</h1>
        <h1 class="p6">e</h1>
    </div>
</body>
</html>